import React, { useEffect, useRef, useState } from 'react'
import style from './index.module.scss'
import { Avatar, Button } from 'antd'
import { getFans, updateFans } from '@/common/api'
import { getLs, getTimer } from '@/common/common'
import _ from 'lodash'
import { UserOutlined } from '@ant-design/icons'
import UsePaginatedHook from '@/components/ComponentHook/UsePaginatedHook'
// import UseSocketHook from '@/components/ComponentHook/UseSocketHook'
import Common from './Common'
import { useNavigate } from 'react-router-dom'
export default function Attention() {
  const navigate = useNavigate()
  const userInfo = getLs('userInfo')
  const { _id: userId } = userInfo
  const [pageSize,setPageSize]=useState(10)
  const {list,setList,endRef}=UsePaginatedHook(getFans,pageSize,{Id:userId})
  // const {socketMessage} =  UseSocketHook({socketId:userId})
  // useEffect(()=>{
  //   if(socketMessage){
  //     setList(preList=>{
  //       // 先检查有没有相同项
  //       const newArr = preList.filter(item=>item._id!==socketMessage._id)
  //       // newArr.unshift(socketMessage)
  //       return newArr
  //     })
  //   }
  // },[socketMessage])
  //回关
  const followBack = async(item)=>{
    const timer = Math.floor(Date.now() / 1000)
    const {_id:otherId,isAttention} = item
    const params = {
      otherId,
      userId,
      timer,
      type:isAttention
    }
    const RES = await updateFans(params)
    if(RES.code===200){
      const newData = list.map(item=>item._id===otherId?{...item,isAttention:!isAttention}:item)
      setList(newData)
    }
  }
  const pushOtherDetail = (item)=>{
    const {_id:operatorId} = item
    navigate(`/userDetail?sign=${operatorId}`)
  }
  return (
    <>
        <ul>
          {list.map((item,index)=>(
            <li key={index} ref={list.length === index + 1?endRef:null}>
              <div className='left'>
              {item.avator? <Avatar src={`http://localhost:5000/${item.avator}`} />:<Avatar icon={<UserOutlined />} />}
              </div>
              <div className='center'>
                <p onClick={()=>{pushOtherDetail(item)}}>{item.name}</p>
                <p>开始关注了你<span>{getTimer(item.timer)}</span></p>
              </div>
              <div className='right'>
                {
                item.isAttention?(<Button onClick={()=>followBack(item)}>已关注</Button>):(
                <Button onClick={()=>followBack(item)} style={{backgroundColor:"#fd2c50",width:"80px",height:"30px"}} type='primary'>回关</Button>
                )
                }
              </div>
            </li>
          ))}
          </ul>
          {list.length===0&&<Common/>}
    </>
  )
}
